<template>
  <div>
    <tabs :tabs="tabs" />
    <div class="question">
      <div class="question-header">
        <div class="title">{{ paperInfo.paper_title }}</div>
        <div class="time">
          <span>总分：{{ paperInfo.paper_score }} 分</span>
          <span>得分：{{ paperInfo.user_score }}</span>
        </div>
        <div class="desc">
          <span>{{ `共${paperInfo.topic_count}题：` }}</span>
          <span v-if="statisticScore(1, 'number') > 0">{{ `${statisticScore(1, 'number')}道单选题（${statisticScore(1, 'score')}分）、` }}</span>
          <span v-if="statisticScore(2, 'number') > 0">{{ `${statisticScore(2, 'number')}道判断题（${statisticScore(2, 'score')}分）、` }}</span>
          <span v-if="statisticScore(3, 'number') > 0">{{ `${statisticScore(3, 'number')}道多选题（${statisticScore(3, 'score')}分）、` }}</span>
          <span v-if="statisticScore(4, 'number') > 0">{{ `${statisticScore(4, 'number')}道不定项选择题（${statisticScore(4, 'score')}分）、` }}</span>
          <span v-if="statisticScore(5, 'number') > 0">{{ `${statisticScore(5, 'number')}道填空题（${statisticScore(5, 'score')}分）、` }}</span>
          <span v-if="statisticScore(6, 'number') > 0">{{ `${statisticScore(6, 'number')}道材料题（${statisticScore(6, 'score')}分）、` }}</span>
          <span v-if="statisticScore(7, 'number') > 0">{{ `${statisticScore(7, 'number')}道完型填空（${statisticScore(7, 'score')}分）、` }}</span>
          <span v-if="statisticScore(8, 'number') > 0">{{ `${statisticScore(8, 'number')}道简答题（${statisticScore(8, 'score')}分）` }}</span>
        </div>
      </div>

      <div class="question-wrap">
        <div v-for="(part, i) in paperInfo.paper_parts" :key="i" class="topic-type">
          <div class="topic-title">
            {{ part.title }}
            <span>
              共计 {{ part.value.length }} 道题
              <span v-if="part.description">（{{ part.description }})</span>
            </span>
          </div>
          <div class="topic-list">
            <div v-for="(item, index) in part.value" :key="item.topic_id" class="topic-item">
              <div class="top">
                <div class="tag">{{ `${index + 1}、` }}</div>
                <div class="title" :style="titleStyle">
                  <el-tag size="mini" effect="dark" :style="tagStyle">{{ item.question_type_text }}</el-tag>
                  <div v-html="item.title" />
                </div>
              </div>
              <!-- 填空题 -->
              <div v-if="item.question_type === 5" class="options">
                <el-row :gutter="60">
                  <el-col v-for="(filling, filling_index) in item.options" :key="filling.key" :span="12">
                    <div class="filling-item">
                      <span class="tag">{{ `（${filling_index + 1}）` }}</span>
                      <el-input v-model="textarea" placeholder="请输入内容" size="mini" />
                    </div>
                  </el-col>
                </el-row>
              </div>
              <!-- 材料题 -->
              <div v-else-if="item.question_type === 6">
                <div v-for="(topic, topicIndex) in item.topics" :key="topicIndex" class="topic-item item-material">
                  <div class="top">
                    <div class="tag">{{ `(${topicIndex + 1})、` }}</div>
                    <div class="title" :style="titleStyle">
                      <el-tag size="mini" effect="dark" :style="tagStyle">{{ topic.question_type_text }}</el-tag>
                      <div v-html="topic.title" />
                    </div>
                  </div>
                  <!-- 填空题 -->
                  <div v-if="topic.question_type === 5" class="options">
                    <el-row :gutter="60">
                      <el-col v-for="(sub_filling, sub_filling_index) in item.options" :key="sub_filling.key" :span="12">
                        <div class="filling-item">
                          <span class="tag">{{ `（${sub_filling_index + 1}）` }}</span>
                          <el-input v-model="textarea" placeholder="请输入内容" size="mini" />
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                  <el-row v-else class="options">
                    <div v-for="suboptions in topic.options" :key="suboptions.key" class="choice-item">
                      {{ suboptions.key }}.
                      <div v-html="suboptions.value" />
                    </div>
                  </el-row>
                  <parsing :parsing="topic" :level="2" />
                </div>
              </div>
              <!-- 完形填空 -->
              <div v-else-if="item.question_type === 7">
                <el-row v-for="(topic, topicIndex) in item.topics" :key="topicIndex" class="top topic" type="flex">
                  <div :style="{ width: '25px' }">{{ `${topicIndex + 1}、` }}</div>
                  <el-row type="flex" class="topic-options">
                    <el-row v-for="(ques, quesIndex) in topic.options" :key="quesIndex" type="flex" class="option">
                      <div>{{ ques.key }}.</div>
                      <div v-html="ques.value" />
                    </el-row>
                  </el-row>
                </el-row>
              </div>
              <!-- 其他 -->
              <el-row v-else class="options">
                <div v-for="ans in item.options" :key="ans.key" class="choice-item">
                  {{ ans.key }}.
                  <div v-html="ans.value" />
                </div>
              </el-row>
              <parsing :parsing="item" :level="1" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tabs from '../tabs';
import Parsing from '../components/parsingRecord';
/** 累加器 **/
const sum = (...arr) => [].concat(...arr).reduce((acc, val) => acc + val, 0);
export default {
  components: {
    Tabs,
    Parsing
  },
  data() {
    return {
      paperInfo: {},
      tabs: [
        {
          title: '试卷考试记录',
          uri: '/exam/paper/settled/' + this.$route.params.id + '/record',
          meta: {
            permission: 'exam.paper.record'
          }
        },
        {
          title: '试卷考试记录 - 详情',
          uri: '/exam/paper/settled/' + this.$route.params.id + '/record/' + this.$route.params.record_id + '/details',
          meta: {
            permission: 'exam.paper.record'
          }
        }
      ],
      titleStyle: { display: 'flex', 'justify-content': 'flex-start', 'align-items': 'baseline' },
      tagStyle: { 'margin-right': '5px' }
    };
  },
  created() {
    // 获取详情
    this.getPaperRecordInfo();
  },
  methods: {
    getPaperRecordInfo() {
      const paperId = this.$route.params.id;
      const recordId = this.$route.params.record_id;
      this.$http.get(
        '/exam/admin/paper/' + paperId + '/record/' + recordId + '/details',
        {},
        ({ data }) => {
          this.paperInfo = data;
        },
        _ => {}
      );
    },
    // 当前部分试题统计
    statisticScore(type, key) {
      /**
       * key score当前部分每种题型的总分数，number当前部分每种题型的总题数
       * type 试题的类型
       */
      const parts = this.paperInfo.paper_parts;
      if (!parts) return 0;
      const calc = {
        // 每种题型总分数
        score: function() {
          return sum(parts.map(part => sum(part.value.map(item => (item.question_type == type ? item.score : 0)))));
        },
        // 每种题型总题数
        number: function() {
          return sum(parts.map(part => sum(part.value.map(item => item.question_type == type))));
        },
        run: function(fn) {
          return fn && fn();
        }
      };
      return calc.run(calc[key]);
    }
  }
};
</script>
<style>
p {
  margin: 0;
  padding: 0;
}
</style>
<style lang="scss" scoped>
.question {
  width: 890px;
  margin: 30px auto 0;
  // 头部标题部分
  &-header {
    position: relative;
    text-align: center;
    .download {
      position: absolute;
      top: 0;
      right: 0;
    }
    .title {
      font-size: 22px;
      font-weight: 500;
      color: #303133;
      margin-bottom: 15px;
    }
    .desc {
      margin-top: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #909399;
      line-height: 22px;
      display: flex;
      flex-wrap: wrap;
    }
    .time {
      margin-top: 15px;
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      display: flex;
      justify-content: center;
      span {
        margin: 0 35px;
      }
    }
  }
  // 试题部分
  &-wrap {
    margin-top: 30px;
    border-top: 1px solid #ebeef5;
    padding: 0 24px;
    .topic-type {
      margin-top: 20px;
      .topic-title {
        font-size: 20px;
        font-weight: bold;
        color: #303133;
        span {
          margin-left: 6px;
          font-size: 12px;
          font-weight: 400;
          color: #606266;
        }
      }
      .topic-list {
        margin-top: 5px;
        .topic-item {
          padding: 20px 0;
          border-bottom: 1px solid #ebeef5;

          .top {
            display: flex;
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            line-height: 26px;
          }
          .topic {
            margin-top: 4px;
            margin-left: 25px;
            .topic-options {
              width: 100%;
              display: flex;
              .option {
                min-width: 125px;
              }
            }
          }
          .options {
            margin-top: 4px;
            .el-radio,
            .el-checkbox,
            .el-textarea {
              margin-top: 12px;
              display: flex;
              margin-right: 0;
            }
            .choice-item {
              display: flex;
              font-size: 14px;
              color: #303133;
              line-height: 20px;
              & + .choice-item {
                margin-top: 12px;
              }
            }
            .filling-item {
              margin-top: 12px;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #303133;
              .tag {
                font-size: 12px;
                font-weight: 400;
                color: #303133;
              }
              ::v-deep.el-input__inner {
                border: none;
              }
            }
          }
        }
        .item-material {
          padding-left: 20px;
          .options {
            padding-left: 20px;
          }
        }
      }
    }
  }
}
</style>
